import React, { Component } from 'react'
import { useNavigate } from "react-router-dom";
import "./index.scss"

import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
class Index extends Component {
  state = {
    row1Tit: 0,
    mySwiper: null,
    goTop: "goTop",
    row2Tit: 0
  }
  componentDidMount() {
    window.addEventListener("scroll", (e) => {
      if (window.scrollY > 70) {
        this.setState({ goTop: "goTop" })
      } else {
        this.setState({ goTop: "goTop hidden" })
      }
    })
    const mySwiper = new Swiper('.swiper-container', {
      autoplay: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        bulletElement: 'li',
      },

    })
    this.setState({
      mySwiper: mySwiper
    })
  }
  goTop = () => {
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: 'smooth'
    })
  }
  row1 = (num) => {
    this.setState({ row1Tit: num })
  }
  row2 = (num) => {
    this.setState({ row2Tit: num })
  }
  render() {
    const { row1Tit, goTop, row2Tit } = this.state;
    return (
      <>
        <div className='banner'>
          <div className='swiper-container'>
            <div className="swiper-wrapper">
              <div className="swiper-slide swiper-slide1">
                <div className='pic'>
                  <img src={require("../../static/images/banner001.jpeg")} alt="" />
                  <div className="con">
                    <div className='title'>
                      科技领域技术开发
                    </div>
                    <div className='tit'>
                      以优质产品拓展未来
                    </div>
                    <div className="btn">
                      了解更多
                    </div>
                  </div>
                  <div className="list wrap">
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          全方位数据化软件服务
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon007.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          多年技术积累 坚实技术团队
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon008.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          物联网+
                        </div>
                        <div className="txt">
                          全覆盖式数智物联解决方案
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon009.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="swiper-slide swiper-slide2">
                <div className='pic'>
                  <img src={require("../../static/images/banner002.jpeg")} alt="" />
                  <div className="con">
                    <div className='title'>
                      科技领域技术开发
                    </div>
                    <div className='tit'>
                      以优质产品拓展未来
                    </div>
                    <div className="btn">
                      了解更多
                    </div>
                  </div>
                  <div className="list wrap">
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          全方位数据化软件服务
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon007.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          多年技术积累 坚实技术团队
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon008.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          物联网+
                        </div>
                        <div className="txt">
                          全覆盖式数智物联解决方案
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon009.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="swiper-slide swiper-slide3">
                <div className='pic'>
                  <img src={require("../../static/images/banner003.jpeg")} alt="" />
                  <div className="con">
                    <div className='title'>
                      科技领域技术开发
                    </div>
                    <div className='tit'>
                      以优质产品拓展未来
                    </div>
                    <div className="btn">
                      了解更多
                    </div>
                  </div>
                  <div className="list wrap">
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          全方位数据化软件服务
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon007.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          软件服务
                        </div>
                        <div className="txt">
                          多年技术积累 坚实技术团队
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon008.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                    <div className="li">
                      <div className="title">
                        <div className="tit">
                          物联网+
                        </div>
                        <div className="txt">
                          全覆盖式数智物联解决方案
                        </div>
                      </div>
                      <div className="icon">
                        <img src={require("../../static/images/icon009.png")} alt="" />
                      </div>
                      <div className='right'>
                        <img src={require("../../static/images/icon010.png")} alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="swiper-pagination"></div>
          </div>
        </div>
        <div className="row-a1">
          <div className="title">
            关于我们
          </div>
          <div className="con wrap">
            <div className="list">
              <div className={row1Tit == 0 ? "li lii" : "li"} onClick={() => { this.row1(0) }}>
                鲲程简介
              </div>
              <div className={row1Tit == 1 ? "li lii" : "li"} onClick={() => { this.row1(1) }}>
                鲲程文化
              </div>
              <div className={row1Tit == 2 ? "li lii" : "li"} onClick={() => { this.row1(2) }}>
                鲲程荣誉
              </div>
              <div className={row1Tit == 3 ? "li lii" : "li"} onClick={() => { this.row1(3) }}>
                组织架构
              </div>
            </div>
            <div className="items">
              <div className={row1Tit == 0 ? "item cur" : "item"} >
                <div className="text">
                  <div className="desc">
                    上海鲲程电子科技有限公司成立于2014年，是一家专业从事
                    工业电子雷管专用延期模块核心技术研发和配套产品供应的高科
                    技型企业。公司拥有完整的工业电子雷管专用延期模块核心技术
                    解决方案、全系列专用芯片和关键设备等，主要产品为“信安”
                    电子雷管专用芯片、控制系统、生产检测设备、安全监控平台
                    等。技术研发涵盖微电子、通信、仪器仪表、物联网等多个领域，拥有多项自主知识产权的专利技术。同时公司已获得第八届
                    中国创新创业....
                  </div>
                  <div className="btn">
                    <span className='txt'>点击了解更多</span>
                    <span className='icon'>
                      <img src={require("../../static/images/icon010.png")} alt="" />
                    </span>
                  </div>
                </div>
                <div className="pic">
                  <img src={require("../../static/images/pic001.png")} alt="" />
                </div>
              </div>
              <div className={row1Tit == 1 ? "item cur" : "item"} >
                <div className="text">
                  <div className="desc">
                    上海鲲程电子科技有限公司成立于2014年，是一家专业从事
                    工业电子雷管专用延期模块核心技术研发和配套产品供应的高科
                    技型企业。公司拥有完整的工业电子雷管专用延期模块核心技术
                    解决方案、全系列专用芯片和关键设备等，主要产品为“信安”
                    电子雷管专用芯片、控制系统、生产检测设备、安全监控平台
                    等。技术研发涵盖微电子、通信、仪器仪表、物联网等多个领域，拥有多项自主知识产权的专利技术。同时公司已获得第八届
                    中国创新创业....
                  </div>
                  <div className="btn">
                    <span className='txt'>点击了解更多</span>
                    <span className='icon'>
                      <img src={require("../../static/images/icon010.png")} alt="" />
                    </span>
                  </div>
                </div>
                <div className="pic">
                  <img src={require("../../static/images/pic001.png")} alt="" />
                </div>
              </div>
              <div className={row1Tit == 2 ? "item cur" : "item"} >
                <div className="text">
                  <div className="desc">
                    上海鲲程电子科技有限公司成立于2014年，是一家专业从事
                    工业电子雷管专用延期模块核心技术研发和配套产品供应的高科
                    技型企业。公司拥有完整的工业电子雷管专用延期模块核心技术
                    解决方案、全系列专用芯片和关键设备等，主要产品为“信安”
                    电子雷管专用芯片、控制系统、生产检测设备、安全监控平台
                    等。技术研发涵盖微电子、通信、仪器仪表、物联网等多个领域，拥有多项自主知识产权的专利技术。同时公司已获得第八届
                    中国创新创业....
                  </div>
                  <div className="btn">
                    <span className='txt'>点击了解更多</span>
                    <span className='icon'>
                      <img src={require("../../static/images/icon010.png")} alt="" />
                    </span>
                  </div>
                </div>
                <div className="pic">
                  <img src={require("../../static/images/pic001.png")} alt="" />
                </div>
              </div>
              <div className={row1Tit == 3 ? "item cur" : "item"} >
                <div className="text">
                  <div className="desc">
                    上海鲲程电子科技有限公司成立于2014年，是一家专业从事
                    工业电子雷管专用延期模块核心技术研发和配套产品供应的高科
                    技型企业。公司拥有完整的工业电子雷管专用延期模块核心技术
                    解决方案、全系列专用芯片和关键设备等，主要产品为“信安”
                    电子雷管专用芯片、控制系统、生产检测设备、安全监控平台
                    等。技术研发涵盖微电子、通信、仪器仪表、物联网等多个领域，拥有多项自主知识产权的专利技术。同时公司已获得第八届
                    中国创新创业....
                  </div>
                  <div className="btn">
                    <span className='txt'>点击了解更多</span>
                    <span className='icon'>
                      <img src={require("../../static/images/icon010.png")} alt="" />
                    </span>
                  </div>
                </div>
                <div className="pic">
                  <img src={require("../../static/images/pic001.png")} alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className='row-a2'>
          <div className="title">
            <div className="tit">
              产品中心
            </div>
            <div className="txt">
              PRODUCT CENTER
            </div>
          </div>
          <div className="con wrap">
            <div className="navlist">
              <div className={row2Tit == 0 ? 'nav current' : 'nav'}>
                <div className='tit' onClick={() => { this.row2(0) }}>
                  <div className='txt'>
                    产品分类
                  </div>
                  <div className="icon">
                    <img src={require("../../static/images/icon014.png")} alt="" />
                  </div>
                </div>
                <div className={row2Tit == 0 ? 'sub animate__animated animate__fadeIn' : 'sub'}>
                  <div className='txt'>品类一</div>
                  <div className='txt'>品类二</div>
                </div>
              </div>
              <div className={row2Tit == 1 ? 'nav current' : 'nav'}>
                <div className='tit' onClick={() => { this.row2(1) }}>
                  <div className='txt'>
                    产品分类
                  </div>
                  <div className="icon">
                    <img src={require("../../static/images/icon014.png")} alt="" />
                  </div>
                </div>
                <div className={row2Tit == 1 ? 'sub animate__animated animate__fadeIn' : 'sub'}>
                  <div className='txt'>品类一</div>
                  <div className='txt'>品类二</div>
                </div>
              </div>
              <div className={row2Tit == 2 ? 'nav current' : 'nav'}>
                <div className='tit' onClick={() => { this.row2(2) }}>
                  <div className='txt'>
                    产品分类
                  </div>
                  <div className="icon">
                    <img src={require("../../static/images/icon014.png")} alt="" />
                  </div>
                </div>
                <div className={row2Tit == 2 ? 'sub animate__animated animate__fadeIn' : 'sub'}>
                  <div className='txt'>品类一</div>
                  <div className='txt'>品类二</div>
                </div>
              </div>
            </div>
            <div className="list">
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/pic002.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    产品名称型号
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/pic002.png")} alt="" />
                </div>
                <div className="text">
                  产品名称型号
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/pic002.png")} alt="" />
                </div>
                <div className="text">
                  产品名称型号
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/pic002.png")} alt="" />
                </div>
                <div className="text">
                  产品名称型号
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/pic002.png")} alt="" />
                </div>
                <div className="text">
                  产品名称型号
                </div>
              </div>
              <div className="lii">
                <div className='icon'>
                  <img src={require("../../static/images/icon010.png")} alt="" />
                </div>
                <div className="txt">
                  点击了解更多
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row-a3">
          <div className="title">
            <div className="tit">
              解决方案
            </div>
            <div className="txt">
              SOLUTIONS
            </div>
          </div>
          <div className="con wrap">
            <div className="list">
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/icon037.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    解决方案
                  </div>
                  <div className="desc animate__animated animate__flash">
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/icon038.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    解决方案
                  </div>
                  <div className="desc animate__animated animate__flash">
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/icon039.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    解决方案
                  </div>
                  <div className="desc animate__animated animate__flash">
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/icon040.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    解决方案
                  </div>
                  <div className="desc animate__animated animate__flash">
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                  </div>
                </div>
              </div>
              <div className="li">
                <div className="pic">
                  <img src={require("../../static/images/icon041.png")} alt="" />
                </div>
                <div className="text">
                  <div className="tit">
                    解决方案
                  </div>
                  <div className="desc animate__animated animate__flash">
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                    解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row-a4">
          <div className="title">
            <div className="tit">
              战略合作
            </div>
            <div className="txt">
              STRATEGIC COOPERATION
            </div>
          </div>
          <dic className="con wrap">
            <div className="con-a1">
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
            </div>
            <div className="con-a2">
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
              <div className="li">
                <div className="back">
                  <img src={require("../../static/images/pic005.png")} alt="" />
                </div>
                <div className="icon">
                  <img src={require("../../static/images/pic006.png")} alt="" />
                </div>
              </div>
            </div>
          </dic>
        </div>
        <div className="row-a5">
          <div className="title">
            <div className="tit">
              可持续发展方案
            </div>
            <div className="txt">
              SUSTAINABLE DEVELOPMENT
            </div>
          </div>
          <div className="con wrap">
            <div className="desc">
              可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展
              可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展
              可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展
              可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展
              可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展可持续性发展
            </div>
            <div className="pic">
              <img src={require("../../static/images/pic008.png")} alt="" />
            </div>
          </div>
        </div>
        <div className="fixed">
          <div className="icons">
            <div className="icon">
              <img src={require("../../static/images/icon011.png")} alt="" />
            </div>
            <div className="icon">
              <img src={require("../../static/images/icon012.png")} alt="" />
            </div>
            <div className="icon">
              <img src={require("../../static/images/icon013.png")} alt="" />
            </div>
          </div>
        </div>
        <div className={goTop} onClick={this.goTop}>
          <div className='icon'>
            <img src={require("../../static/images/goTop.png")} alt="" />
          </div>
        </div>
      </>
    )
  }
}

export default function Home() {
  const navigation = useNavigate();
  return <Index navigation={navigation} />;
}